<script setup lang="ts">
defineOptions({
  name: "weatherItem"
});
import { ref, reactive, toRefs, onMounted, nextTick, onUnmounted, getCurrentInstance, markRaw } from "vue";
import wetBall from "@/assets/svg/machine/wetBall.svg?component";
import dryBall from "@/assets/svg/machine/dryBall.svg?component";
import hanZhi from "@/assets/svg/machine/hanZhi.svg?component";
import newPoint from "@/assets/svg/machine/newPoint.svg?component";
import absoluteHumidity from "@/assets/svg/machine/absoluteHumidity.svg?component";
import { queryWeatherData } from "@/api/machineClass";
import { useRouter } from "vue-router";
const router = useRouter();
const iconComList = {
  dryBall: markRaw(dryBall),
  wetBall: markRaw(wetBall),
  hanZhi: markRaw(hanZhi),
  absoluteHumidity: markRaw(absoluteHumidity),
  newPoint: markRaw(newPoint)
};

interface Props {
  /**  数据列表 */
  dataList?: any;
}

const props = withDefaults(defineProps<Props>(), {
  dataList: {}
});

const emits = defineEmits(["showHistory"]);

const state = reactive<any>({
  weatherForm: {
    num: "",
    type: "hour"
  },
  weatherData: {}
});

const {
  popoverData,
  weatherForm,
  spcJobList,
  weatherSpcJobList,
  pointsData,
  pointsCurve,
  factoryList,
  areaData,
  spcDataList,
  spcOptionList,
  dataDetailTable,
  currentBackgroundImage,
  weatherOptions,
  queryParams,
  tableData,
  tableAlarmData,
  tableAlarmSelectedData,
  tableAlarmDataAll,
  dateRange,
  dateRangeSpc,
  dateRangeAlarm,
  querySpcDetailParams,
  checkList,
  Detail,
  queryAlarmParams,
  weatherData,
  spcForm,
  alarmOptions,
  queryParams2
} = toRefs(state);

const viewSpcDetail = () => {
  router.push({
    path: "/machine/operation/environmentTestManage/components/weatherHistory",
    query: {
      // className: "MACHINE" //GAS:气课，MACHINE:机械科,ELECTRICTITY:电科，WATER：水科
    }
  });
  // emits("showHistory");
  // showDetails.value = true;
  // showSpcDetail.value = true;
  // dateRangeSpcDetail.value = initSpcDate();
  // querySpc();
};

const visibleY2 = ref(false);
const typeList = ref([
  {
    value: "hour",
    label: "小时"
  }
]);

const getWeatherData = async () => {
  const params: any = { diffHours: weatherForm.value.num || 0 };
  const data = await queryWeatherData(params);
  weatherData.value = data;
};

const editSpcY2 = () => {
  getWeatherData();
  visibleY2.value = false;
};
</script>

<template>
  <div class="energy-desk-content">
    <div class="energy-desk-content-list">
      <div :class="{ 'content-item': true }">
        <component :is="iconComList.dryBall" class="content-icon" />
        <div class="content-box">
          <div class="content-box-label">室外干球温度</div>
          <div class="content-box-data">
            <span class="data-text">{{ dataList && dataList.tempDry }}</span
            ><span class="data-unit">&nbsp;℃</span>
          </div>
          <div class="content-box-data">
            <span class="data-alt">环比：</span>
            <span :style="{ color: dataList && dataList.tempDry >= 0 ? '#EF7577' : '#10B981' }">{{
              dataList && dataList.tempDry > 0 ? "+" : dataList && dataList.tempDry < 0 ? "-" : ""
            }}</span>
            <span :style="{ color: dataList && dataList.tempDry >= 0 ? '#EF7577' : '#10B981' }">{{ dataList && dataList.tempDryAlt }}</span>
            <span v-if="dataList && dataList.tempDry" :style="{ color: dataList && dataList.tempDry >= 0 ? '#EF7577' : '#10B981' }">{{ "%" }}</span>
            <px-icon
              v-if="dataList && dataList.tempDry !== null && dataList && dataList.tempDry !== undefined"
              :color="dataList && dataList.tempDry >= 0 ? '#EF7577' : '#10B981'"
              ><Top v-if="dataList && dataList.tempDry >= 0" /><Bottom v-if="dataList && dataList.tempDry < 0"
            /></px-icon>
          </div>
        </div>
      </div>
      <div :class="{ 'content-item': true }">
        <component :is="iconComList.wetBall" class="content-icon" />
        <div class="content-box">
          <div class="content-box-label">室外湿球温度</div>
          <div class="content-box-data">
            <span class="data-text">{{ dataList && dataList.tempWet }}</span
            ><span class="data-unit">&nbsp;℃</span>
          </div>
          <div class="content-box-data">
            <span class="data-alt">环比：</span>
            <span :style="{ color: dataList && dataList.tempWet >= 0 ? '#EF7577' : '#10B981' }">{{
              dataList && dataList.tempWet > 0 ? "+" : dataList && dataList.tempWet < 0 ? "-" : ""
            }}</span>
            <span :style="{ color: dataList && dataList.tempWet >= 0 ? '#EF7577' : '#10B981' }">{{ dataList && dataList.tempWetAlt }}</span>
            <span v-if="dataList && dataList.tempWet" :style="{ color: dataList && dataList.tempWet >= 0 ? '#EF7577' : '#10B981' }">{{ "%" }}</span>
            <px-icon
              v-if="dataList && dataList.tempWet !== null && dataList && dataList.tempWet !== undefined"
              :color="dataList && dataList.tempWet >= 0 ? '#EF7577' : '#10B981'"
              ><Top v-if="dataList && dataList.tempWet >= 0" /><Bottom v-if="dataList && dataList.tempWet < 0"
            /></px-icon>
          </div>
        </div>
      </div>
      <div :class="{ 'content-item': true }">
        <component :is="iconComList.hanZhi" class="content-icon" />
        <div class="content-box">
          <div class="content-box-label">焓值</div>
          <div class="content-box-data">
            <span class="data-text">{{ dataList && dataList.enthalpy }}</span
            ><span class="data-unit">&nbsp;kj/kg</span>
          </div>
          <div class="content-box-data">
            <span class="data-alt">环比：</span>
            <span :style="{ color: dataList && dataList.enthalpy >= 0 ? '#EF7577' : '#10B981' }">{{
              dataList && dataList.enthalpy > 0 ? "+" : dataList && dataList.enthalpy < 0 ? "-" : ""
            }}</span>
            <span :style="{ color: dataList && dataList.enthalpy >= 0 ? '#EF7577' : '#10B981' }">{{ dataList && dataList.enthalpyAlt }}</span>
            <span v-if="dataList && dataList.enthalpy" :style="{ color: dataList && dataList.enthalpy >= 0 ? '#EF7577' : '#10B981' }">{{ "%" }}</span>
            <px-icon
              v-if="dataList && dataList.enthalpy !== null && dataList && dataList.enthalpy !== undefined"
              :color="dataList && dataList.enthalpy >= 0 ? '#EF7577' : '#10B981'"
              ><Top v-if="dataList && dataList.enthalpy >= 0" /><Bottom v-if="dataList && dataList.enthalpy < 0"
            /></px-icon>
          </div>
        </div>
      </div>
      <div :class="{ 'content-item': true }">
        <component :is="iconComList.absoluteHumidity" class="content-icon" />
        <div class="content-box">
          <div class="content-box-label">绝对湿度</div>
          <div class="content-box-data">
            <span class="data-text">{{ dataList && dataList.humility }}</span
            ><span class="data-unit">&nbsp;g/Kg</span>
          </div>
          <div class="content-box-data">
            <span class="data-alt">环比：</span>
            <span :style="{ color: dataList && dataList.humility >= 0 ? '#EF7577' : '#10B981' }">{{
              dataList && dataList.humility > 0 ? "+" : dataList && dataList.humility < 0 ? "-" : ""
            }}</span>
            <span :style="{ color: dataList && dataList.humility >= 0 ? '#EF7577' : '#10B981' }">{{ dataList && dataList.humilityAlt }}</span>
            <span v-if="dataList && dataList.humility" :style="{ color: dataList && dataList.humility >= 0 ? '#EF7577' : '#10B981' }">{{ "%" }}</span>
            <px-icon
              v-if="dataList && dataList.humility !== null && dataList && dataList.humility !== undefined"
              :color="dataList && dataList.humility >= 0 ? '#EF7577' : '#10B981'"
              ><Top v-if="dataList && dataList.humility >= 0" /><Bottom v-if="dataList && dataList.humility < 0"
            /></px-icon>
          </div>
        </div>
      </div>
      <div :class="{ 'content-item': true }">
        <component :is="iconComList.newPoint" class="content-icon" />
        <div class="content-box">
          <div class="content-box-label">露点</div>
          <div class="content-box-data">
            <span class="data-text">{{ dataList && dataList.tempDew }}</span
            ><span class="data-unit">&nbsp;℃</span>
          </div>
          <div class="content-box-data">
            <span class="data-alt">环比：</span>
            <span :style="{ color: dataList && dataList.tempDew >= 0 ? '#EF7577' : '#10B981' }">{{
              dataList && dataList.tempDew > 0 ? "+" : dataList && dataList.tempDew < 0 ? "-" : ""
            }}</span>
            <span :style="{ color: dataList && dataList.tempDew >= 0 ? '#EF7577' : '#10B981' }">{{ dataList && dataList.tempDewAlt }}</span>
            <span v-if="dataList && dataList.tempDew" :style="{ color: dataList && dataList.tempDew >= 0 ? '#EF7577' : '#10B981' }">{{ "%" }}</span>
            <px-icon
              v-if="dataList && dataList.tempDew !== null && dataList && dataList.tempDew !== undefined"
              :color="dataList && dataList.tempDew >= 0 ? '#EF7577' : '#10B981'"
              ><Top v-if="dataList && dataList.tempDew >= 0" /><Bottom v-if="dataList && dataList.tempDew < 0"
            /></px-icon>
          </div>
        </div>
      </div>

      <div :class="{ 'content-item': true }">
        <div class="action">
          <div class="right_btn">
            <px-button class="btn_item" type="primary" plain @click="viewSpcDetail">查看历史</px-button>
          </div>
          <div class="right_btn">
            <px-popover :visible="visibleY2" placement="left-start" title="设置环比周期" :width="290">
              <px-form :inline="true" :model="weatherForm">
                <px-row>
                  <px-col :span="12">
                    <px-form-item label="" prop="num" style="width: 120px">
                      <px-input-number v-model="weatherForm.num" :min="1" :max="24" :value-on-clear="1" step-strictly />
                    </px-form-item>
                  </px-col>
                  <px-col :span="12">
                    <px-form-item label="" prop="type" style="width: 120px">
                      <px-select v-model="weatherForm.type" placeholder="请选择">
                        <px-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
                      </px-select>
                    </px-form-item>
                  </px-col>
                </px-row>
              </px-form>
              <div style="margin: 0; text-align: right">
                <px-button size="small" text @click="visibleY2 = false">取消</px-button>
                <px-button size="small" type="primary" @click="editSpcY2">确定</px-button>
              </div>
              <template #reference>
                <px-button type="primary" text @click="visibleY2 = true">设置环比周期</px-button>
              </template>
            </px-popover>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
$colorDone: #00b36d;
$colorTotal: var(--px-color-primary);

.energy-desk-content {
  width: 100%;

  .energy-desk-content-list {
    display: flex;
    flex-flow: row nowrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
    padding-left: 16px;
    border-left: 1px solid #dcdcdc;

    .content-item {
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: flex-start;
      min-width: 150px;
      height: 100%;
      margin-right: auto;

      .content-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 30px;
      }

      .action {
        display: flex;
        flex-flow: column nowrap;

        .right_btn {
          display: flex;
          align-items: center;
          justify-content: center;

          .btn_item {
            margin-bottom: 8px;
          }
        }
      }
    }

    .color-done {
      color: $colorDone;
    }

    .data-text {
      font-size: 24px;
      line-height: 1;
      white-space: nowrap;
    }

    .data-unit {
      font-size: 14px;
    }

    .data-alt {
      font-size: 12px;
      font-weight: 400;
      line-height: 12px;
      color: #909399;
    }

    .content-box {
      display: flex;
      flex-direction: column;
      gap: 6px;

      .content-box-label {
        font-size: 14px;
        font-weight: 400;
        line-height: 1;
        color: #555;
        white-space: nowrap;
      }

      .content-box-data {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
